<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--1.checkbox单选框-->
  <label for="protocol">同意协议</label>
  <input type="checkbox" v-model="isAgree" id="protocol" value="agree">
  <h2>您选择的是{{isAgree}}</h2>
  <!--disabled属性：可以禁用元素，禁用后元素不可用，也不可点击-->
  <button :disabled="!isAgree" >下一步</button>
  
  <!--2.CheckBox多选框-->
    <input type="checkbox" value="篮球" v-model="hobbies"> 篮球
    <input type="checkbox" value="羽毛球" v-model="hobbies"> 羽毛球
    <input type="checkbox" value="足球" v-model="hobbies"> 足球
    <input type="checkbox" value="乒乓球" v-model="hobbies"> 乒乓球
   <h2>您的爱好是：{{hobbies}}</h2>
  
  <!--3.值绑定（动态的给input里的value赋值）：就是v-bind在input中的应用-->
  <label v-for="item in originHobbies">
    <input type="checkbox" :value="item" v-model="hobbies">{{item}}
  </label>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      message: '你好',
      isAgree:false,
      hobbies:[],
      originHobbies:['篮球','足球','羽毛球','乒乓球','高尔夫球','台球']
    },
  })

</script>
</body>
</html>